/**
 * 高阶组件 (HOC Hight - Order - Component)
 *
 *    概念：本质上就是一个函数，接收参数为组件，返回值为一个新组件的函数。
 *
 *    作用：让组件更好的复用新逻辑。
 *
 *    通用语法：
 *      const NewComponent = withHoc(WrappedComponent)
 *        - WrappedComponent 被包装的组件
 *        - NewComponent     返回的新组件
 *
 *    示例一：
 *      1. 实现一个组件，让被包装的组件可以延迟3秒再显示
 *      2. 优化 withDelay HOC, 让其延迟的秒数可以配置化。
 *      3. 优化 withDelay HOC, 让其被包装组件不要丢失 props 数据
 *         透传下去
 *
 *         this.props = {}
 *         this.props = {a: 1,b: 2}
 *            <WrappedComponent a={this.props.a} b={this.props.b} />
 *            <WrappedComponent {...this.props} />
 *      4. 抽离该 HOC 到外部文件夹中。
 *
 *    案例二：
 *      1. 实现一个 withContext 高阶组件，让被高阶的组件中能够 props 直接获取 Context 中的值。
 *
 *
 */

import { Component } from "react";

import CounterContext from "./contexts/counter";

import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";

export default class App extends Component {
  state = {
    num: 10,
  };

  add = () => {
    this.setState((prevState) => ({
      num: prevState.num + 1,
    }));
  };

  render() {
    return (
      <CounterContext.Provider
        value={{ num: this.state.num, increment: this.add }}
      >
        <div>
          <h1>高阶组件</h1>

          <Home />
          <hr />
          <About msg="张三" />
          <hr />
          <Contact />
        </div>
      </CounterContext.Provider>
    );
  }
}
